<template>
    <div>
        <t-header></t-header>

        <div class="w">
            <div class="form-wrap">
                <div class="form-item">
                    <div>请输入当前密码*</div>
                    <el-input type="password" v-model="password" placeholder="请输入当前密码"></el-input>
                </div>
                <div class="form-item">
                    <div>请输入新密码*</div>
                    <el-input type="password" v-model="newPassword" placeholder="请输入新密码"></el-input>
                </div>
                <div class="form-item">
                    <div>再次输入新密码*</div>
                    <el-input type="password" v-model="isNewPssword" placeholder="再次输入新密码"></el-input>
                </div>
                <el-button @click="checkForm" type="primary">确认修改</el-button>
            </div>
        </div>


        <t-footer></t-footer>
    </div>
</template>

<script>
import Header from '../../components/global/Header';
import Footer from '../../components/global/Footer';
import { reactive, toRefs, onMounted } from '@vue/composition-api';
import axios from 'axios';
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    setup(props, context) {
        // 配置axios
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            reloadIsLogin();
        })

        // 刷新后，重新获取用户信息，避免刷新后共享数据丢失的BUG
        const reloadIsLogin = async function () {
            // 不在登录状态，就不发请求获取
            if (!window.localStorage.getItem('token'))
              return false;

            // 发送请求获取用户信息
            let token = window.localStorage.getItem('token');
            let { data: res } = await axios.get(`/user/login/${token}`);
            if (res.status != 200)
              return context.parent.$message.error('获取用户信息失败，请重新登录');

            // 重新设置数据给store共享
            context.parent.$store.commit('setIsLogin', true);
            context.parent.$store.commit('setUser', res.user);
            context.parent.$store.commit('setToken', token);
            formData.email = res.user.email;
        }

        // 表单数据
        const formData = reactive({
            password: '',
            newPassword: '',
            isNewPssword: '',
            email: context.parent.$store.state.user.email
        });

        // 密码验证规则
        let checkPassword = /^\w{3,18}$/i;

        // 验证表单数据
        const checkForm = function () {
            if (!checkPassword.test(formData.newPassword))
                return context.parent.$message.error('密码只能是数字、字母、下划线 3~18位');
            if (formData.newPassword !== formData.isNewPssword)
                return context.parent.$message.error('两次输入的新密码不一样，请重新输入');
            if (formData.newPassword === formData.password)
                return context.parent.$message.error('原始密码和新修改的密码一样，不需要修改');
            submitForm();
        }

        // 提交修改表单
        const submitForm = async function () {
            let { data: res } = await axios.post('/user/password', formData);
            if (res.status !== 200)
                return context.parent.$message.error(res.msg);

            // 清空数据
            context.parent.$message.success(res.msg);
            formData.password = '';
            formData.newPassword = '';
            formData.isNewPssword = '';
        }

        const methods = { checkForm }

        return {
            ...methods,
            ...toRefs(formData)
        }
    },
    beforeRouteEnter (to, from, next) {
        // 没有登录进行拦截
        if (!window.localStorage.getItem('token')) {
            let that = this;
            Message.error('您还没有登录，不能使用该功能');
            setTimeout(() => {
                next('/home');
            }, 2000);
        } else {
            next();
        }
    },
}
</script>

<style lang="less" scoped>
.form-wrap {
    width: 500px;
    margin: 100px auto 0;
}

.form-item {
    margin: 10px 0;
    div {
        color: #4b4b4b;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
    }
}
</style>